<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>로그인</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <h2>로그인</h2>
    <form id="loginForm">
      <input id="username" placeholder="아이디" required><br>
      <input id="password" type="password" placeholder="비밀번호" required><br>
      <button type="submit">로그인</button>
    </form>
    <p class="message" id="message"></p>
  </div>
  <script>
    document.getElementById('loginForm').onsubmit = function(e) {
      e.preventDefault();
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      })
      .then(res => res.text())
      .then(msg => {
        if (msg === '로그인 성공') {
          document.getElementById('message').style.color = 'green';
          document.getElementById('message').innerText = '로그인 성공！';
          setTimeout(() =>{
            window.location.href = '/home.html';
          },1000); //1秒后跳转
        } else {
          document.getElementById('message').style.color = '#e84118';
          document.getElementById('message').innerText = '아이디 나 비밀번호 틀려';
        }
      });
    }
  </script>
</body>
</html>